<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-row type="flex" justify="space-between">
      <el-col :span="18">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
        >
          <el-form-item label="定额标准版本号:" prop="version">
            <el-input
              v-model="queryParams.version"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="能耗类型:" prop="energyType">
            <el-select
              v-model.number="queryParams.energyType"
              placeholder="请选择"
            >
              <el-option
                v-for="dict in dict.type.energy_type"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指标类型:" prop="targetType">
            <el-select
              v-model="queryParams.targetType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.target_type"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form></el-col
      >
      <el-col :span="4" style="text-align: right">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['energy:criterion:add']"
          >新增</el-button
        >
        <el-button
          type="danger"
          plain
          icon="el-icon-refresh"
          size="small"
          @click="handleRefreshCache"
          >刷新缓存</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="typeList" border height="690">
      <el-table-column label="定额标准版本号" align="center" prop="version" />
      <el-table-column label="能耗类型" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.energy_type"
            :value="scope.row.energyType"
          />
        </template>
      </el-table-column>
      <el-table-column label="指标类型" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.target_type"
            :value="scope.row.targetType"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.energy_ration_criterion_status"
            :value="scope.row.status"
          />
        </template>
      </el-table-column>
      <el-table-column label="制定时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.makingTime | filterTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.expirationTime | filterTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="制定人员" align="center" prop="makingUserName" />
      <el-table-column label="操作" fixed="right" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-view"
            @click="handleLook(scope.row)"
            v-hasPermi="['energy:criterion:query']"
            >查看</el-button
          >
          <el-button
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.status == 0 || scope.row.status == 3"
            v-hasPermi="['energy:criterion:edit']"
            >修改</el-button
          >
          <!-- <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['energyconsumption:quota:remove']"
              >删除</el-button
            > -->
          <el-button
            size="small"
            type="text"
            icon="el-icon-check"
            @click="handleEnter(scope.row)"
            v-show="scope.row.status == 0"
            v-hasPermi="['energy:criterion:go:publicity']"
            >进入公示</el-button
          >
          <el-button
            v-show="scope.row.status == 1"
            size="small"
            type="text"
            icon="el-icon-check"
            @click="handleAudit(scope.row)"
            v-hasPermi="['energy:criterion:confirm:publicity']"
            >公示确认</el-button
          >
          <el-button
            v-show="scope.row.status == 1"
            size="small"
            type="text"
            icon="el-icon-close"
            @click="handleRejected(scope.row)"
            v-hasPermi="['energy:criterion:reject:publicity']"
            style="color: #f56c6c"
            >公示驳回</el-button
          >
          <el-button
            size="small"
            v-show="scope.row.status == 2"
            type="text"
            icon="el-icon-upload2"
            @click="handleRelease(scope.row)"
            v-hasPermi="['energy:criterion:go:publish']"
            >正式发布</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="margin-top: 10px"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[20, 40, 60, 80]"
      @pagination="getList"
    />
    <!-- <el-drawer
        :title="title"
        :visible.sync="open"
        custom-class="drawerpadding"
        direction="rtl"
        size="80%"
      > -->
    <zeda-dialog
      v-model="open"
      width="1200px"
      :title="title"
      :before-close="cancel"
    >
      <!-- <el-dialog
          :visible.sync="open"
          width="80%"
          :title="title"
          custom-class="drawerpadding"
          top="3vh"
        > -->
      <el-form
        :inline="true"
        :model="form"
        :rules="formRules"
        size="small"
        ref="form"
      >
        <el-form-item prop="targetType" label="指标类型：">
          <el-select v-model.number="form.targetType" placeholder="指标类型">
            <el-option
              v-for="dict in dict.type.target_type"
              :key="dict.value"
              :label="dict.label"
              :value="Number(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="energyType" label="能耗类型">
          <el-select v-model.number="form.energyType" placeholder="能耗类型">
            <el-option
              v-for="dict in dict.type.energy_type"
              :key="dict.value"
              :label="dict.label"
              :value="Number(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="setQuota">
          <div class="child child1">
            <div class="child-img">
              <img src="@/assets/images/visualization/l4.png" alt="" />
            </div>
            <div class="child-text">指标增幅%</div>
            <div class="child-num">
              <el-input-number
                :step-strictly="true"
                v-model="form.section1Rate"
                :min="-100"
                :max="100"
                :step="1"
                label="描述文字"
              ></el-input-number>
            </div>
          </div>
          <div class="child child2">
            <div class="child-img">
              <img src="@/assets/images/visualization/l2.png" alt="" />
            </div>
            <div class="child-text">指标不变%</div>
            <div class="child-num">
              <el-input-number
                :step-strictly="true"
                v-model="form.section2Rate"
                :min="-100"
                :max="100"
                :step="1"
                label="描述文字"
                :disabled="true"
              ></el-input-number>
            </div>
          </div>
          <div class="child child3">
            <div class="child-img">
              <img src="@/assets/images/visualization/l3.png" alt="" />
            </div>
            <div class="child-text">指标降幅%</div>
            <div class="child-num">
              <el-input-number
                :step-strictly="true"
                v-model="form.section3Rate"
                :min="-100"
                :max="100"
                :step="1"
                label="描述文字"
              ></el-input-number>
            </div>
          </div>
          <div class="child child4">
            <div class="child-img">
              <img src="@/assets/images/visualization/l3.png" alt="" />
            </div>
            <div class="child-text">指标降幅%</div>
            <div class="child-num">
              <el-input-number
                :step-strictly="true"
                v-model="form.section4Rate"
                :min="-100"
                :max="100"
                :step="1"
                label="描述文字"
              ></el-input-number>
            </div>
          </div>
          <!-- <div class="option option1">引导指</div>
            <div class="option option2">基准值</div>
            <div class="option option3">约束值</div>
            <div class="option option4">参考能耗额度（kw·h/p）</div> -->
        </div>
        <el-steps :active="statusTOactive(form.status)" class="elsteps">
          <el-step
            title="定制新版本"
            description="录入新规范标准条款"
          ></el-step>
          <el-step
            title="正在10个工作日公示"
            description="能耗管理生态体系角色均要电子审核签字"
          ></el-step>
          <el-step title="待发版" description="公示通过"></el-step>
          <el-step title="正式发版" description="正式定版、发布"></el-step>
        </el-steps>
      </el-form>
      <div class="contentText">
        <div class="contentText-head">注解(能耗额度标准):</div>
        <div class="contentText-content">
          ·对于上年度实际能源资源大于约束值的，按照每年不小于4%的降幅配置下一年度能源资源消耗指标<br />
          ·对于上年度实际能源资源消耗小于约束值但大于基准值的，按照每年不小于2%的降幅配置下一年度的能源资源消耗指标:<br />
          ·对于上年度实际能源资源消耗小于基准值但大于引导值的，维持上一年度度能源资源消耗指标不变;<br />
          ·对于上年度实际能源资源消耗小于引导值的，按照不大于2%的增幅且小于定额引导值配置下一年度能源资源消耗指标。
        </div>
      </div>

      <div class="drawer-footer" v-if="title != '查看能耗定额标准'">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <!-- </el-dialog> -->
    </zeda-dialog>
    <!-- </el-drawer> -->
  </lb-layout>
</template>

<script>
import {
  rationCriterionList,
  editVersion,
  addVersion,
  getVersion,
  auditGoPublicity,
  auditConfirmPublicity,
  auditRejectPublicity,
  auditGoPublish,
} from "@/api/energyconsumption/quota";
export default {
  name: "quota",
  dicts: ["target_type", "energy_type", "energy_ration_criterion_status"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        targetType: null,
        energyType: null,
        version: "",
      },
      // 表单参数
      form: {
        energyType: null,
        id: null,
        section1Rate: 0,
        section2Rate: 0,
        section3Rate: 0,
        section4Rate: 0,
        targetType: null,
      },
      num: 1,
      // 表单校验
      formRules: {
        targetType: [
          { required: true, message: "指标类型不能为空", trigger: "blur" },
        ],
        energyType: [
          { required: true, message: "能耗类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.judgeRoutequery();
  },
  filters: {
    filterTime(val) {
      function returnTwo(t) {
        return ("0" + t).toString().slice(-2);
      }
      if (val) {
        var t = new Date(val).getTime();
        var time = new Date(t);
        var Y = time.getFullYear();
        var M = returnTwo(time.getMonth() + 1);
        var D = returnTwo(time.getDate());
        var HH = returnTwo(time.getHours());
        var MM = returnTwo(time.getMinutes());
        var SS = returnTwo(time.getSeconds());
        return `${Y}-${M}-${D} ${HH}:${MM}:${SS}`;
      } else {
        return "";
      }
    },
  },
  computed: {
    statusTOactive() {
      return function (val) {
        let res = 1;
        if (val == 1) {
          res = 2;
        } else if (val == 2) {
          res = 3;
        } else if (val == 3) {
          res = 4;
        }
        return res;
      };
    },
  },
  methods: {
    // 路由参数判断
    judgeRoutequery() {
      if (this.$route.query.sortFiled != undefined) {
        this.queryParams.sortFiled = "version";
        this.queryParams.sortType = "DESC";
        this.getList();
        setTimeout(() => {
          if (this.typeList.length > 0) {
            this.handleLook(this.typeList[0]);
          }
        }, 1000);
      } else {
        this.queryParams.sortFiled = undefined;
        this.queryParams.sortType = undefined;
        this.getList();
      }
    },
    /** 列表 */
    getList() {
      this.loading = true;
      this.$store.commit("app/updateApiCount", "add");
      rationCriterionList(this.addDateRange(this.queryParams, this.dateRange))
        .then((response) => {
          this.typeList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.$store.commit("app/updateApiCount");
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!10105");
        });
    },
    handleClose(status) {
      console.log(status);
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        energyType: null,
        id: null,
        section1Rate: 0,
        section2Rate: 0,
        section3Rate: 0,
        section4Rate: 0,
        targetType: null,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        targetType: null,
        version: "",
      };
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加能耗定额标准";
    },

    /** 查看按钮操作 */
    handleLook(row) {
      this.reset();
      const dictId = row.version;
      this.ids = dictId;
      this.$store.commit("app/updateApiCount", "add");
      getVersion(dictId)
        .then((response) => {
          this.form = response.data;
          this.form.section1Rate = this.form.section1Rate * 100;
          this.form.section2Rate = this.form.section2Rate * 100;
          this.form.section3Rate = this.form.section3Rate * 100;
          this.form.section4Rate = this.form.section4Rate * 100;
          this.open = true;
          this.title = "查看能耗定额标准";
          this.$store.commit("app/updateApiCount");
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!10106");
        });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const dictId = row.version;
      this.ids = dictId;
      this.$store.commit("app/updateApiCount", "add");
      getVersion(dictId)
        .then((response) => {
          this.form = response.data;
          this.form.section1Rate = this.form.section1Rate * 100;
          this.form.section2Rate = this.form.section2Rate * 100;
          this.form.section3Rate = this.form.section3Rate * 100;
          this.form.section4Rate = this.form.section4Rate * 100;
          this.open = true;
          this.title = "修改能耗定额标准";
          this.$store.commit("app/updateApiCount");
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!10107");
        });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const dictIds = row.version;
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {})
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 进入公示 */
    handleEnter(row) {
      const dictIds = row.id;
      this.$confirm("是否确认进入公示？").then(() => {
        this.$store.commit("app/updateApiCount", "add");
        auditGoPublicity(dictIds)
          .then((res) => {
            this.$store.commit("app/updateApiCount");
            this.getList();
            if (res.code == 200) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$store.commit("app/updateApiCount");
            // this.$message.error("系统错误,请联系管理员!10108");
          });
      });
    },
    /** 公示确认按钮操作 */
    handleAudit(row) {
      const dictIds = row.id;
      this.$confirm("是否确认公示确认？").then(() => {
        this.$store.commit("app/updateApiCount", "add");
        auditConfirmPublicity(dictIds)
          .then((res) => {
            this.$store.commit("app/updateApiCount");
            this.getList();
            if (res.code == 200) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$store.commit("app/updateApiCount");
            // this.$message.error("系统错误,请联系管理员!10109");
          });
      });
    },
    /** 公示驳回按钮操作 */
    handleRejected(row) {
      const dictIds = row.id || this.ids;
      this.$confirm("是否确认驳回？").then(() => {
        this.$store.commit("app/updateApiCount", "add");
        auditRejectPublicity(dictIds)
          .then((res) => {
            this.$store.commit("app/updateApiCount");
            this.getList();
            if (res.code == 200) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$store.commit("app/updateApiCount");
            // this.$message.error("系统错误,请联系管理员!10110");
          });
      });
    },
    handleRelease(row) {
      const dictIds = row.id || this.ids;
      this.$confirm("是否确认正式发布？").then(() => {
        this.$store.commit("app/updateApiCount", "add");
        auditGoPublish(dictIds)
          .then((res) => {
            this.$store.commit("app/updateApiCount");
            this.getList();
            if (res.code == 200) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$store.commit("app/updateApiCount");
            // this.$message.error("系统错误,请联系管理员!10111");
          });
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let postForm = JSON.parse(JSON.stringify(this.form));
          if (postForm.id) {
            this.$store.commit("app/updateApiCount", "add");
            editVersion({
              energyType: postForm.energyType,
              id: postForm.id,
              section1Rate: postForm.section1Rate / 100,
              section2Rate: postForm.section2Rate / 100,
              section3Rate: postForm.section3Rate / 100,
              section4Rate: postForm.section4Rate / 100,
              targetType: postForm.targetType,
            })
              .then((res) => {
                this.open = false;
                this.$store.commit("app/updateApiCount");
                this.getList();
                if (res.code == 200) {
                  this.$message.success("修改成功");
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$store.commit("app/updateApiCount");
                // this.$message.error("系统错误,请联系管理员!10112");
              });
          } else {
            this.$store.commit("app/updateApiCount", "add");
            addVersion({
              energyType: postForm.energyType,
              section1Rate: postForm.section1Rate / 100,
              section2Rate: postForm.section2Rate / 100,
              section3Rate: postForm.section3Rate / 100,
              section4Rate: postForm.section4Rate / 100,
              targetType: postForm.targetType,
            })
              .then((res) => {
                this.open = false;
                this.$store.commit("app/updateApiCount");
                this.getList();
                if (res.code == 200) {
                  this.$message.success("新增成功");
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$store.commit("app/updateApiCount");
                // this.$message.error("系统错误,请联系管理员!10113");
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /** 刷新缓存按钮操作 */
    handleRefreshCache() {
      refreshCache().then(() => {
        this.$modal.msgSuccess("刷新成功");
      });
    },
  },
};
</script>
<style lang="scss">
.drawerpadding {
  padding: 0 20px;
}
</style>
<style lang="scss">
.headQuota {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 20px;

  img {
    width: 20px;
    height: 20px;
  }

  span {
    margin-left: 6px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(34, 34, 34, 0.85);
    line-height: 28px;
  }
}

.setQuota {
  width: 90%;
  height: 326px;
  position: relative;
  background: url("~@/assets/images/visualization/bzbg.png") center bottom
    no-repeat;
  background-size: 100% 326px;
  margin: 0 auto;
  margin-bottom: 40px;

  .child {
    position: absolute;
    width: 24.1%;

    .child-img {
      text-align: center;

      img {
        width: 41px;
        height: 40px;
      }
    }

    .child-text {
      text-align: center;
      font-size: 12px;
      font-family: PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 20px;
      padding-top: 8px;
    }

    .child-num {
      display: flex;
      justify-content: center;
    }
  }

  .child1 {
    bottom: 90px;
    left: 2.8%;
  }

  .child2 {
    bottom: 135px;
    left: 26.9%;
  }

  .child3 {
    bottom: 180px;
    left: 51%;
  }

  .child4 {
    bottom: 225px;
    left: 75.1%;
  }

  .option {
    position: absolute;
    width: 24.36%;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    line-height: 20px;
    bottom: -20px;
  }

  .option1 {
    left: 0%;
  }

  .option2 {
    left: 24.46%;
  }

  .option3 {
    left: 48.92%;
  }

  .option4 {
    left: 73.38%;
  }
}

.elsteps {
  width: 90%;
  margin: 0 auto;
}

.contentText {
  margin-top: 30px;
  padding: 17px 0 21px 40px;
  background: #f9f9f9;
  border-radius: 4px;
  width: 100%;

  .contentText-head {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.85);
    line-height: 46px;
  }

  .contentText-content {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 0.85);
    line-height: 24px;
  }
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 0 0;
}
</style>
